@import "../../styles/layout.module.scss";

.main {
    width: 100vw;
    height: 100vh;

    display: flex;
}

.divRight {
    width: calc(100% - $sidebar-width);
    // flex-grow: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.divVmWrapper {
    width: 100%;
    height: calc(100% - $tabbar-height);
    overflow: hidden;
}

.divVmContentBase {
    width: 100%;
    height: 100%;

    display: flex;

    background-color: var(--vm-wrapper-bkg-color);

    > section {
        font-family: "Roboto Mono", monospace;
    }
}

.divVmContentHorizontal {
    @extend .divVmContentBase;

    > section[class="sectionIrEditor"] {
        width: 34%;
        height: 100%;
    }

    > section[class="sectionVmConsole"] {
        width: 33%;
        height: 100%;
        border-left: 2px solid var(--vm-section-border-color);
        border-right: 2px solid var(--vm-section-border-color);
    }

    > section[class="sectionVmInspector"] {
        width: 33%;
        height: 100%;
    }
}

.divVmContentVertical {
    @extend .divVmContentBase;
    flex-direction: column;

    > section[class="sectionIrEditor"] {
        width: 100%;
        height: 34%;
    }

    > section[class="sectionVmConsole"] {
        width: 100%;
        height: 33%;
        border-top: 2px solid var(--vm-section-border-color);
        border-bottom: 2px solid var(--vm-section-border-color);
    }

    > section[class="sectionVmInspector"] {
        width: 100%;
        height: 33%;
    }
}
